<script>
  import { cn } from "$lib/utils";

  let cells = [1, 2, 3, 4, 5];
</script>

<div class='w-full'>
  <div class="grid md:grid-cols-4 gap-2">
    {#each cells as item, i}
      <div
        class={cn(
          "p-1 rounded-lg h-36",
          i < 3 && "md:col-span-2",
          i == 2 && "md:col-span-4",
          i > 2 && "md:col-span-2"
        )}
      >
        <div
          class="size-full rounded-lg flex items-center justify-center bg-zinc-200 dark:bg-zinc-900 text-xl"
        >
          <!-- {item} -->
        </div>
      </div>
    {/each}
  </div>
</div>
